import './MovieList.scss'
import {useEffect,useState} from 'react';
import http from 'axios'
import { Link} from "react-router-dom";// 导入你的路由组件

function MovieList(props){
    //定义方法，获取数据
    // const getMovieList = ()=>{
    //     let response = http.get("https://m.maoyan.com/ajax/movieOnInfoList") //proimise
    //     response
    //     .then((res)=>{
    //         console.log(res)
    //     })
    //     .catch((err)=>{
    //         console.log("err",err)
    //     })
    // }

    // 创建一个state,保存列表数据
    const [movieList,setMovieList] = useState([])
    const [countMovie,setCountMovie] = useState(0)

    // async await
    const getMovieList = async ()=>{
        // A 获取数据
        // await 等待的是 then的结果（成功时的数据）
        let ret = await http.get("https://m.maoyan.com/ajax/movieOnInfoList") //proimise
        console.log(ret,ret.data,ret.data.movieList)
        // B 保存数据
        setMovieList(ret.data.movieList)  //设置列表数据
        setCountMovie(ret.data.total) //设置总数
    }

    // 当组件挂载完成，获取数据
    useEffect(()=>{
        getMovieList()  //C 调用

    },[]);

    // 
    return (
        <>
        <h2>热映电影({countMovie})</h2>
        <ul className="list">
            {/* D 渲染模板 */}
            {
                movieList.map((item)=>( 
                    <li key={item.id}>
                        <Link to={`/movie_detail/${item.id}`}>
                            <img src={item.img} />
                        </Link>
                        {/* <a href="#">{item.nm}</a> */}
                        {/* 传对象，待验证 */}
                        {/* <Link to={ {pathname:"/movie_detail",state:{id:item.id}} }>{item.nm}</Link> */}
                        {/* 传地址字符串 */}
                        <Link to={`/movie_detail/${item.id}`}>{item.nm}</Link>
                    </li>
                    )
                )
            }
           
            {/* <li>
                <img src="https://p0.pipi.cn/mmdb/54ecde878d32ff0e139257d548b73a30ac9f9.jpg?imageMogr2/thumbnail/2500x2500%3E" />
                <a href="#">神探狄人杰</a>
            </li>

            <li>
                <img src="https://p0.pipi.cn/mmdb/54ecde878d32ff0e139257d548b73a30ac9f9.jpg?imageMogr2/thumbnail/2500x2500%3E" />
                <a href="#">神探狄人杰</a>
            </li>

            <li>
                <img src="https://p0.pipi.cn/mmdb/54ecde878d32ff0e139257d548b73a30ac9f9.jpg?imageMogr2/thumbnail/2500x2500%3E" />
                <a href="#">神探狄人杰</a>
            </li> */}
        </ul>
        </>
    )
}

export default MovieList;